<template>
  <div>
      <el-tabs type="border-card">
        <el-tab-pane label="资源编辑">
          <el-table
            ref="resourceTableList"
            :data="resourceTableList"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              property="id"
              width="20">
            </el-table-column>
            <el-table-column
              property="resourceName"
              label="资源名称">
              <template slot-scope="scope">
                <el-input v-if="scope.row.id == editId" v-model="scope.row.resourceName" placeholder=""></el-input>
                <span v-else>{{scope.row.resourceName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="resourceLink"
              label="资源链接">
              <template slot-scope="scope">
                <el-input v-if="scope.row.id == editId" v-model="scope.row.resourceLink" placeholder=""></el-input>
                <span v-else>{{scope.row.resourceLink}}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="other"
              label="其他说明">
              <template slot-scope="scope">
                <el-input v-if="scope.row.id == editId" v-model="scope.row.other" placeholder=""></el-input>
                <span v-else>{{scope.row.other}}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="type"
              label="资源类型">
              <template slot-scope="scope">
                <el-input v-if="scope.row.id == editId" v-model="scope.row.type" placeholder=""></el-input>
                <span v-else>{{scope.row.type}}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="dateTime"
              label="最后编辑时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-if="scope.row.id != editId"
                  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  v-if="scope.row.id != editId"
                  @click="handleDelete(scope.row.id)">删除</el-button>
                  <el-button
                  size="mini"
                  type="warning"
                  v-if="scope.row.id == editId"
                  @click="cancelEdit(scope.row)">取消</el-button>
                  <el-button
                  size="mini"
                  type="primary"
                  v-if="scope.row.id == editId"
                  @click="saveEdit(scope.row)">保存</el-button>
              </template>
            </el-table-column>          
          </el-table>         
        </el-tab-pane>
        <el-tab-pane label="资源推荐">
          <el-form :model="resourceForm" :rules="rules" ref="resourceForm" label-width="100px" class="demo-resourceForm">
            <el-form-item label="资源名称" prop="resourceName">
              <el-input v-model="resourceForm.resourceName"></el-input>
            </el-form-item>
            <el-form-item label="资源链接" prop="resourceLink">
              <el-input v-model="resourceForm.resourceLink"></el-input>
            </el-form-item>
            <el-form-item label="其他说明" prop="other">
              <el-input type="textarea" v-model="resourceForm.other"></el-input>
            </el-form-item>
            <el-form-item label="资源类型" prop="type">
              <el-input placeholder="如：学习类，美食类，旅游类，休闲娱乐类 等" v-model="resourceForm.type"></el-input>
            </el-form-item>          
            <el-form-item>
              <el-button type="primary" @click="submitForm('resourceForm')">推荐</el-button>
              <el-button @click="resetForm('resourceForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
export default {
  name:"ResourceUpload",
  data() {
      return {
        editDate: [],
        editId: '',
        resourceTableList: [
          {
            id: '',
            resourceName:'',
            resourceLink: '',
            other: '',
            type: ''
          }
        ],
        currentRow: null,
        resourceForm: {
          resourceName: '',
          resourceLink: '',
          other: '',
          type: ''
        },
        rules: {
          resourceName: [
            { required: true, message: '请输入资源名称', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请输入资源类型', trigger: 'blur' }
          ],
        }
      }
  },
  mounted() {
    this.initResourceTableList();
  },
  methods: {
    saveEdit(row) {
      console.log(row);
      row.dateTime=null;
      row.status=null;
      row.deleted=null;
      this.postRequest('/resource/updateResource',row).then((resp) => {
        if(resp) {
          console.log(resp)
        }
      })
      this.editId = '';
    },
    cancelEdit(row) {
      if(row.id) {
        for (let i in row) {
          row[i] = this.editDate[i]
        }
        this.editId = '';
      }else {
        this.resourceTableList.forEach((item,index) => {
          if (item.id == '') {
            this.resourceTableList.splice(index, 1)
          }
        })
      }
    },
    initResourceTableList() {
      let page = 1;
      this.getRequest('/resource/getResources?page='+page).then((resp) => {
        if (resp) {
          this.resourceTableList = resp;
          console.log(resp);
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.putRequest('/resource/insertResource', this.resourceForm).then((resp) => {
            if (resp) {
              console.log(resp);
              this.resetForm(formName);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setCurrent(row) {
      this.$refs.resourceTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleEdit(row) {
      console.log(row);
      if(this.resourceTableList.some((item) => {
        return item.id == ''
      })) {
        this.$message({
          message: '请先保存数据',
          type: 'warning'
        });
        return
      }
      this.editDate = JSON.parse(JSON.stringify(row));
      this.editId = row.id;
      console.log(this.editId)
    },
    handleDelete(id) {
      console.log(id);
      this.$confirm('此操作将删除该资源记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.deleteRequest('/resource/deleteResource',id).then((resp) => {
            if (resp) {
              console.log(resp);
              this.initResourceTableList();
            }
          });          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });     
    }
  }
}
</script>

<style>

</style>